<template>
	<view class="content">
			<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
				<view slot="center" class="leftText dis-row">
					<view class="search">
							  <u-icon name="search" color="#000" size="24"></u-icon>
							  <!-- #ifdef MP-WEIXIN -->
							   <view style="width: 410rpx;padding-top: 7rpx;">
								   <u--input
									v-model="seachParentdata.searchName"
									border="none"
									placeholder="搜索你要找的好活"
									color="#A1A1A1"
									@blur ="changesInput"
									placeholderStyle="color:rgba(255,255,255,.5)"
									></u--input>
							   </view>
							  <!-- #endif -->
							  <!-- #ifdef MP-ALIPAY || APP-PLUS -->
							   <view style="width: 530rpx;padding-top: 10rpx;">
								   <u--input
									v-model="seachParentdata.searchName"
									border="none"
									placeholder="搜索你要找的好活"
									color="#A1A1A1"
									@blur ="changesInput"
									placeholderStyle="color:rgba(255,255,255,.5)"
									></u--input>
							   </view>
							  <!-- #endif -->
							 
						</view>
					</view>
			</u-navbar>
		
		<view class="center">
			<view class="filterRight">
				<view @click="checkAddres">地点<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view>
				<view @click="checkGongzhong">工种<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view>
				<!-- <view>筛选<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view> -->
			</view>
		</view>
	<!-- 	<view style="height: 20rpx;background-color: black;"></view> -->
		<view class="index">
			<block v-if="rowList.length>0">
					<scroll-view scroll-y="true" class="scroll-Y">
					  <view class="list" v-for="(item,index) in rowList" :key="index">
						<view class="title" @click="NavInfoMsg(item)">
						<!--  <text class="tips" v-if="item.isTop == 1">置顶</text> -->
						   <view v-if="item.titleName">{{cutstr(item.titleName,65)}}</view>
						</view>
						<view class="cont" @click="NavInfoMsg(item)">{{cutstr(item.workDesc,103)}}</view>
						<view class="tag" @click="NavInfoMsg(item)">
						  <view class="t1" v-if="item.salaryStr">{{item.salaryStr}}</view>
						 <view v-if="item.settlementStr">{{item.settlementStr}}</view>
						 <block v-if="item.welfareNew"><view v-for="(childitem,childindex) in item.welfareNew">{{childitem}}</view></block>
						</view>
						<view class="info">
						  <view class="left">
							<view class="top">
							 <view class="name">{{item.nickName}}</view>
							 <block v-if="item.isEnterPrise == 0 && item.isRealName == 1">
								  <image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg" />
								  <view class="authMe" v-if="">实名认证</view>
							 </block>
							 <block v-if="item.isEnterPrise == 1 && item.isRealName == 1">
								  <image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/comp-real.svg" />
								  <view class="comp">企业认证</view>
							 </block>
							</view>
						   <view class="addr">
							 <u-icon name="map" color="#A1A1A1" size="13"></u-icon>
							 {{item.provinceId}}{{item.cityId}} · {{item.createTime}}
						   </view>
						  </view>
						  <view class="right">
						   <!-- <view class="t2">已发名片</view> -->
							<view class="t3"></view>
							<view class="btn">立即联系</view>
						  </view>
						</view>
					  </view>
					</scroll-view>
			</block>
			<block v-if="rowList.length == 0">
				<view class="empty-img" style="padding-top: 380rpx;">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
					<label>暂无内容</label>
				</view>
			</block>
		</view>
		
		
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList &&cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(cityitem,cityindex) in cityList" 
							:key="cityindex" 
							:class="{'shengActive':(si==cityindex && isclickCitysheng == true)}"
							v-if="cityitem.pid==0"
							@click="shengClick(cityitem,cityindex)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList[si].childone" 
							:key="shiIndex"
							:class="{'shiActive':(ci == shiIndex && isclickCityshi == true)}"
							@click="shiClick(shiItem,shiIndex)"
							>
								{{cutstr(shiItem.name,10)}}
							</view>
						</scroll-view>
					</view>
				 	<view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in cityList[si].childone[ci].child" :key="quindex"
							:class="{'quActive':(qi==quindex && isclickCityqu == true)}"
							@click="quClick(quitem,quindex)">
								{{cutstr(quitem.name,10)}}
							</view>
						</scroll-view>
					</view>
				 </view>
				 
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanAddresIndex">清除</view>
					 <view class="addres-btn" @click="getCheckAddress">确定选择</view>
				 </view>
			 </view>
		</pop>
		<!--全部工种-->
		<pop ref="gongzhong" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			 <view class="con-del dis-clm">
				 <view class="cityName">全部工种</view>
				 <view class="checkgongzhongLList  row-box" v-if="selectCheckgognzhong.length>0">
					 <view v-for="(se,sc) in selectCheckgognzhong" :key="sc" class="dis-row" @click="delSelectgz(se,sc)" style="min-width: 120rpx;">
						 {{se.skillName}}<u-icon name="close" size="15"></u-icon>
					 </view>
				 </view>
				 <view class="cityList dis-row" >
						  <view class="sheng dis-clm">
							<scroll-view scroll-y="true">
								<view class="sheng-Lst" v-for="(gzitem,gzindex) in gongzhongList" 
									:key="gzindex" 
									:class="{'shengActive':(gzlevelone==gzindex && isclickgzone == true)}"
									@click="gzTaskLevelone(gzitem,gzindex)">
									{{cutstr(gzitem.skillName,10)}}
								</view>
							</scroll-view>
						  </view>
						<view class="leveltwo dis-clm" v-if="gongzhongList[gzlevelone] && gongzhongList[gzlevelone].child">
							<scroll-view scroll-y="true">
								<view class="shi-lst" v-for="(shiItem,shiIndex) in gongzhongList[gzlevelone].child" 
								:key="shiIndex"
								:class="{'shiActive':(gzleveltwo == shiIndex && isclickgztwo == true)}"
								@click="gzTaskLevelTwo(shiItem,shiIndex)"
								>
									{{cutstr(shiItem.skillName,10)}}
								</view>
							</scroll-view>
						</view>
	
				
				
				 </view>
			<!-- 	 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanGongZhongIndex">清除</view>
					 <view class="addres-btn" @click="getCheckGongZhong">确定选择</view>
				 </view> -->
			 </view>
		</pop>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from './index-model.js'
	import pop from "@/components/ming-pop/ming-cityindex.vue"
	let index=new Index();
	export default {
		data() {
			return {
				direction:'below',
				seachParentdata:{
					cityid:'',
					cityName:'',
					searchName:''
				},
				rowList:[],
				cityList:[], //省市区 数据列表
				si:0, //省下标
				ci:0, //市下标
				qi:0, //区下标
				gongzhongList:[], //底部弹窗工种列表
				gzlevelone:0, //二级工种 当前选中的序号
				gzleveltwo:0, //三级工种 当前选中的序号
				selectCheckgognzhong:[],//选中的工种
				isclickgzone:false,//二级工种 是否被点击
				isclickgztwo:false,//三级工种 是否被点击
				isclickCitysheng:false,//省是否被点击
				isclickCityshi:false,//市是否被点击
				isclickCityqu:false,//区是否被点击
				sendValue:null,
				page:0,
				pagesize:10,
				Qurylist: [],
				current: -1,
				checkSelect:null, //选中的工种
			}
		},
		components:{
			pop
		},
		onLoad(opt) {
			this.seachParentdata = JSON.parse(opt.str)
			let send={
				"word":this.seachParentdata.searchName,
				"cityId":this.seachParentdata.cityid+"",
				"pageIndex":this.page,
				"pageSize":this.pagesize
			}
			this.sendValue = send
			this.getSearchList(send)
			this.getQueryType()
			// if(uni.getStorageSync('token')){
				this.getCityList()
			// }
			// else{
			// 	index.show_tips('请先去登录')
			// 	setTimeout(()=>{
			// 		index.redirectto('../login/login')
			// 	},400)
			// }
		},
		onPullDownRefresh() {
			this.getSearchList(this.sendValue)
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		onShow() {
			// if(uni.getStorageSync('token')){
				this.getCityList()
			// }
		},
		methods: {
			NavInfoMsg(item) {
				// if(!uni.getStorageSync('token')){
				// 	index.navigate_to('../../pagesC/login/login')
				// 	return false
				// }
				if(uni.getStorageSync('token')){
					let url = '../../pagesB/jobinfo/index?id=' + item.orderId
					index.navigate_to(url)
				}
			},
			//输入框查询
			changesInput(e) {
				this.sendValue = null
				//console.log(this.seachParentdata.searchName,'===yy=')
				if(this.seachParentdata.searchName == ''){
					index.show_tips('关键字不能为空')
					return false
				}
				let send={
					"word":this.seachParentdata.searchName,
					"cityId":this.seachParentdata.cityid+""
				}
				this.sendValue = send
				this.getSearchList(send)
			},
			getSearchList(send) {
				// let send={
				// 	"word":str,
				// 	"cityId":ids
				// }
				if(send.word == ''){
					index.show_tips('请认真填写查询的关键字')
					return false
				}
				send.pageIndex = this.page,
				send.pageSize = this.pagesize
				index.getPublicUserMember(send,'client/job/searchListByWord','post',res=>{
					let arr = [],welfares;
					this.rowList = []
					if(res.data.code == 200 && res.data.success){
						arr = res.data.result
						if(arr.length == 0){
							this.page = 0
						}else{
							 //this.rowList = []
							for(let i=0;i<arr.length;i++){
								arr[i].titleName = arr[i].address+'招'+arr[i].skills  //拼接地址+技能 = 列表标题
								if(arr[i].welfare){
									welfares=arr[i].welfare.split(',');
									for(let i=0;i<welfares.length;i++){
										if(welfares[i] == ''){
											welfares.splice(i,1)
										}
									}
									arr[i].welfareNew = welfares;
									//arr[i].welfareNew = arr[i].welfare.split(',')
								}else{
									arr[i].welfareNew = []
								}
								this.rowList.push(arr[i])
							}
							if(arr.length<this.pagesize){
								this.page =0
							}else{
								this.page++
							}
						}
					}else{
						this.rowList = []
						this.page=0
						index.show_tips(res.data.message)
						return false
					}
				})
			},
			cutstr(str, len) {
				var str_length = 0;
				var str_len = 0;
				var str_cut = new String();
				str_len = str.length;
				for (var i = 0; i < str_len; i++) {
					var a = str.charAt(i);
					str_length++;
					if (escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if (str_length >= len) {
						str_cut = str_cut.concat("...");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if (str_length < len) {
					return str;
				}
			},
			//地点
			//获取省市区数据列表
			getCityList() {
				index.getPublicUserMember({},'client/public/find/areaList2','get',res=>{
					//console.log(res,'城市')
					if(res.data.code == 200 && res.data.success){
						let arr=res.data.result
						let provList = []
						if(arr.length>0){
							for(let i=0;i<arr.length;i++){
								if(arr[i].pid==0){
									provList.push(arr[i])
								}
							}
							if(provList.length>0){
								for(let i=0;i<provList.length;i++){
									provList[i].childone = []
									for(let j=0;j<arr.length;j++){
										//console.log(arr[j].id,'====arr[j].id ====')
										if(arr[j].pid == provList[i].id){
											provList[i].childone.push(arr[j])
										}
									}
								}
								//三级区
								for(let m=0;m<provList.length;m++){
									if(provList[m].childone.length>0){
										for(let n=0;n<provList[m].childone.length;n++){
											provList[m].childone[n].child=[]
											for(let k=0;k<arr.length;k++){
												if(arr[k].pid == provList[m].childone[n].id){
													provList[m].childone[n].child.push(arr[k])
												}
											}
										}
									}
								}
							}
							this.cityList = provList
							uni.setStorageSync('city',this.cityList)
							//console.log(this.cityList,'=====city====')
						}else{
							if(res.data.code == '401'){
								uni.removeStorageSync('')
								index.navigate_to('../../pagesC/login/login');
							}
							arr=[]
						}
					}
				})
			},
			checkAddres() {
				//this.show = true
				this.page=0
				if(uni.getStorageSync('token')){
					this.$refs.city.show()
				}else{
					index.navigate_to('/pages/login/login');
				}
			},
			//点击省切换
			shengClick(item,rv) {
				this.si = rv 
				this.ci = 0
				this.qi =0
				this.isclickCitysheng = true
				this.isclickCityshi = false 
				this.isclickCityqu = false
			},
			//点击市切换
			shiClick(item,cv) {
				this.ci = cv
				this.qi = 0
				this.isclickCityshi = true
			},
			quClick(item,qus) {
				this.qi = qus
				this.isclickCityqu = true
			},
			//清除选中的地址
			cleanAddresIndex() {
				this.si = 0
				this.ci = 0
				this.qi = 0
				this.$refs.city.close()
			},
			//按地点查询
			getCheckAddress() {
				this.sendValue = null
		
				let sendpostData = {
					//"provinceId":this.cityList[this.si].id,
					"word":this.seachParentdata.searchName,
					"cityId":this.cityList[this.si].childone[this.ci].id+""
				}
				this.sendValue = sendpostData
				if(!this.cityList[this.si].id || !this.cityList[this.si].childone[this.ci].id){
					index.show_tips('请认真选择地址')
					return false
				}
				this.$refs.city.close();
				this.getSearchList(sendpostData)
			    //this.getTiaoRowList(sendpostData);
			},
			//打开选择工种
			checkGongzhong() {
				if(this.gongzhongList.length == 0){
					index.show_tips('暂时没有工种数据')
					return false
				}
				this.page=0
				this.$refs.gongzhong.show()
			},
			//查询技能
		//查询工种
			getQueryType() {
				let types= "construction"
				this.Qurylist = []
				//console.log(1)
				index.getPublicMember({},'client/skills/list/'+types,'get',res=>{
				//	console.log(res,'=====4---')
					if(res.data.success && res.data.code == 200){
						let arr = res.data.result
						let gzarr=[];
						if(arr.length>0){
							for(let i=0;i<arr.length;i++){
								if(arr[i].slevel == 2){
									this.Qurylist.push({name:arr[i].skillName,id:arr[i].id})
									gzarr.push(arr[i]);
								}
							}
							//把三级工种压到二级工种里面
							if(gzarr.length>0){
								for(let j=0;j<gzarr.length;j++){
									gzarr[j].child = []
									for(let m=0;m<arr.length;m++){
										if(arr[m].pid == gzarr[j].id){
											gzarr[j].child.push(arr[m])
										}
									}
								}
							}
							this.gongzhongList = gzarr;
							uni.setStorageSync("gongzhong",this.gongzhongList)  //缓存工种
						}else{
							this.gongzhongList=[]
						}
					}else{
						this.Qurylist = []
						this.gongzhongList = []
					}
				})
			},
			//点击工种二级类型 切换下标
			gzTaskLevelone(item,gzindex) {
				this.gzlevelone = gzindex
				this.gzleveltwo = 0
				this.isclickgzone = true
				this.isclickgztwo = false
			},
			//切换三级工种 类型 下标
			gzTaskLevelTwo(item,gzindex) {
				this.isclickgztwo = true
				this.gzleveltwo = gzindex
				this.checkSelect = item
				this.sendValue = null
				let sendpost = {
					//"level2":one.join(','),
					"level3":item.id,
					"word":this.seachParentdata.searchName,
					"pageIndex":this.page,
					"pageSize":this.pagesize
				}
				this.sendValue = sendpost
				this.$refs.gongzhong.close()
				this.getSearchList(sendpost)
				
				// if(this.selectCheckgognzhong.length == 0){
				// 	this.gzleveltwo = gzindex
				// 	this.selectCheckgognzhong.push(item)
				// }else{
					
				// 	let issure = false
				// 	for(let i=0;i<this.selectCheckgognzhong.length;i++){
				// 		if(this.selectCheckgognzhong[i].id == item.id){
				// 			issure=true
				// 		}
				// 	}
				// 	if(issure == false){
						
				// 		if(this.selectCheckgognzhong.length<3){
				// 			this.selectCheckgognzhong.push(item)
				// 			this.gzleveltwo = gzindex
				// 		}else{
				// 			index.show_tips('所选工种不能超过3个')
				// 			return false
				// 		}
						
				// 	}
				// }
			},
			//移除选中的工种
			delSelectgz(se,sc) {
				if(this.selectCheckgognzhong.length>0){
					this.selectCheckgognzhong.splice(sc,1)
					//delete this.selectCheckgognzhong[sc]
				}
			},
			//清空选中的工种
			cleanGongZhongIndex() {
				this.gzlevelone = 0
				this.gzleveltwo = 0
				this.selectCheckgognzhong = []
				
				this.$refs.gongzhong.close()
			},
			
			//确定选中的工种进行查询
			getCheckGongZhong() {
				this.sendValue =null
				if(this.selectCheckgognzhong.length == 0){
					index.show_tips('请先去选择要查询的工种')
					return false
				}
				let one=[],two=[]
				for(let i = 0;i<this.selectCheckgognzhong.length;i++){
					if(this.selectCheckgognzhong[i].slevel == 2){
						one.push(this.selectCheckgognzhong[i].id)
					}
					if(this.selectCheckgognzhong[i].slevel == 3){
						two.push(this.selectCheckgognzhong[i].id)
					}
				}
				let sendpost = {
					//"level2":one.join(','),
					"level3":two.join(','),
					"word":this.seachParentdata.searchName,
					"pageIndex":this.page,
					"pageSize":this.pagesize
				}
				this.sendValue = sendpost
				//console.log(sendpost,'======sendpost====')
				this.$refs.gongzhong.close()
				//this.zdrowList = []
				this.getSearchList(sendpost)
			}
		}
	}
</script>

<style lang="scss">
@import url("@/static/css/publics.css");
@import url("./index.css");
::v-deep {
  .u-navbar--fixed {	  
	  background: #fff;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
	  position: absolute;
	  left: 100rpx;
    }

	  .search {
		  margin-left: 0rpx;
	    display: flex;
	    background: rgba($color: #E4F0FF, $alpha: 0.3);
	    height: 60rpx;
	    padding: 0 10rpx;
	    border-radius: 8rpx;
	    margin-right: 0rpx;
	    ::v-deep {
	      .u-input {
	        margin: 0 10rpx;
	      }
	    }
	  }

  }
}

.content{
	
}
.center{
	padding: 20rpx 20rpx 0rpx 20rpx;
	background: #fff;
	.filterRight {
	  display: flex;
	  justify-content: space-around;
	  font-size: 24rpx;
	  color: #a1a1a1;
	  padding-bottom: 20rpx;
	  view {
	    display: flex;
	    margin-left: 30rpx;
	    ::v-deep {
	      .u-icon {
	        margin-left: 5rpx;
	      }
	    }
	  }
	}
}

.index {
	padding-bottom: 140rpx;
	.complist{
		background-image: url('')!important;
		background-repeat: no-repeat!important;
		background-position: bottom left!important;
	}
    .list {
      padding: 20rpx 20rpx 0;
	  background: #fff;
	  margin-top: 20rpx;
	  // margin-bottom: 20rpx;
      .title {
        display: flex;
        align-items: center;
        text {
          background: #ff5964;
          color: #fff;
          font-size: 20rpx;
          padding: 8rpx 14rpx;
          border-radius: 8rpx;
        }
        view {
          font-size: 36rpx;
          font-weight: bold;
          // margin-left: 20rpx;
        }
      }
      .cont {
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #424242;
      }
      // .tag {
      //   display: flex;
      //   view {
      //     background: #f7f7f7;
      //     border-radius: 8rpx;
      //     font-size: 28rpx;
      //     padding: 10rpx;
      //     margin-right: 10rpx;
      //     color: #424242;
      //   }
      //   .t1 {
      //     color: #ff5964;
      //   }
      // }
	  .tag {
	    display: flex;
	  		flex-wrap: wrap;
	    view {
	      background: #f7f7f7;
	      border-radius: 8rpx;
	      font-size: 28rpx;
	      padding: 10rpx;
	      margin-right: 10rpx;
	      color: #424242;
	  		  margin-bottom: 10rpx;
	    }
	    .t1 {
	      color: #ff5964;
	    }
	  }
      .info {
        padding-top: 20rpx;
        padding-bottom: 30rpx;
        margin-top: 20rpx;
        align-items: baseline;
        border-top: 0.5px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        .left {
          .top {
            display: flex;
            align-items: center;
            .name {
              color: #0f0f0f;
              font-weight: bold;
            }
            image {
              width: 28rpx;
              height: 28rpx;
			  margin-left: 14rpx;
			  margin-right: 10rpx;
            }
            .authMe {
              color: #a1a1a1;
              font-size: 24rpx;
            }
			.comp {
			  color: #d9a14e;
			  font-size: 24rpx;
			}
          }
          .addr {
            display: flex;
            color: #a1a1a1;
            font-size: 24rpx;
            margin-top: 10rpx;
            ::v-deep {
              .u-icon {
                margin-right: 14rpx;
              }
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .t1 {
            background: #ddffd5;
            color: #424242;
            font-size: 24rpx;
            border-radius: 24rpx;
            padding: 2rpx 10rpx;
          }
		  .t2 {
		    background: #E4F0FF;
		    color: #424242;
		    font-size: 24rpx;
		    border-radius: 24rpx;
		    padding: 2rpx 10rpx;
		  }
		  .t-textPre{
			  height: 34rpx;
		  }
          .btn {
            height: 60rpx;
            line-height: 60rpx;
            width: 140rpx;
            text-align: center;
            color: #fff;
            border-radius: 8rpx;
            background: #0575ff;
            font-size: 28rpx;
          }
        }
      }
  }
}
</style>